<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../libs/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../libs/app.css" />
		<link href="../../css/main.css" rel="stylesheet" />
		<link href="../../css/vip-pay.css" rel="stylesheet" />
	</head>

	<body>
		<div class="head">
			<img class="mui-action-back" src="../../images/all-left.png" alt="">
			<p>支付</p>
		</div>
		<div class="context">
			<p class="sign">确认申请成为会员，支付<span class="vipPrice">--</span>元</p>
			<div class="way">
				<p>支付方式</p>
				<div class="way1">
					<span class="quan"></span>
					<img class="img1" src="../../images/vip-zhi.png" alt="">
					<span>支付宝</span>
				</div>
				<div class="way2">
					<span class="quan"></span>
					<img class="img2" src="../../images/vip-wei.png" alt="">
					<span>微信</span>
				</div>
			</div>
			<div class="pay">
				<p>共<span class="pay-s">1</span>件,总金额<span class="pay-b vipPrice">--</span>元</p>
				<div class="sure-pay">
					确认支付
				</div>
			</div>
		</div>

		<script src="../../libs/mui.min.js"></script>
		<script src="../../js/jquery-3.1.1.min.js"></script>
		<script src="../../js/url.js"></script>
		<script type="text/javascript">
			var ERROR_OK = 'S002';

            // 显示vip价格 不参与支付
            $.getJSON(ur + 'rest/appUserController/dic/vipPrice', function (res) {
                if (res.meta.code == ERROR_OK) $('.vipPrice').html(res.data[0].typecode);
                else mui.toast('获取价格失败');
            });

            var ALIPAYSERVER = ur + 'rest/appUserController/open-vip-ali';
            var WXPAYSERVER = ur + 'rest/appUserController/open-vip-wechat';

			mui.init();

            $('.way1').on('tap', function() {
                $('.way1>.quan').addClass('addred');
                $('.way2>.quan').removeClass('addred');
            });
            $('.way2').on('tap', function() {
                $('.way2>.quan').addClass('addred');
                $('.way1>.quan').removeClass('addred');
            });

			/*点击确认支付判断是微信还是支付宝*/
            $('.sure-pay').on('tap', function() {
                if($('.way1>.quan').hasClass('addred')) {
                    pay('alipay');
                } else if($('.way2>.quan').hasClass('addred')) {
                    pay('wxpay');
                } else {
                    mui.toast('请选择支付方式');
                }
            });

			// 2. 发起支付请求
			/**
			 * @augments: 'alipay','wxpay'
			 */
			function pay(id) {
				// 从服务器请求支付订单
				var PAYSERVER = '';
				if(id == 'alipay') {
					PAYSERVER = ALIPAYSERVER;
					mui.alert('微信端暂不支持支付宝支付╮(╯▽╰)╭');
					return;
				} else if(id == 'wxpay') {
					PAYSERVER = WXPAYSERVER;
				}
				$.ajax({ // 请求订单信息
						url: PAYSERVER,
						headers: {
							"X-Token": localStorage.token
						},
						type: 'POST',
						dataType: 'json',
						data: {
							"month": "100",
                            openid: localStorage.trueOpenId,
                            type: 'userWebParam'
						}
					})
					.done(function(res) {
                        console.log('订单信息', res);
						if(res.meta.code == ERROR_OK) {
                            pays_web(JSON.parse(res.data));
						}
					})

			}

            function pays_web(data) {
                function onBridgeReady() {
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', data,
                        function (res) {
                            if (res.err_msg == "get_brand_wcpay_request:ok") {
                            } // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                        }
                    );
                }

                if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                    }
                } else {
                    onBridgeReady();
                }
            }
		</script>
	</body>

</html>